<template>
  <div :class="$style.wrap">
    <ContentWrap>
      <BaseInfo :info="info"></BaseInfo>
      <Title title="关怀信息" :title-class="$style.title" style="padding-top:10px"></Title>
      <List :column="4" sep=":" :gutter="24" default-value="--">
        <ListItem label="满意度" dict-type-code="KQ_SATISFACTION" :value="info.satisfaction"></ListItem>
        <ListItem label="实际关怀日期" :value="info.careDate"></ListItem>
      </List>
      <CareTable v-if="sms" title="短信关怀" type="sms" :business-code="info.taskCode"></CareTable>
      <CareTable v-if="email" title="邮件关怀" type="email" :business-code="info.taskCode"></CareTable>
      <CareTable v-if="call" title="电话关怀" type="call" :business-code="info.taskCode"></CareTable>
      <CareTable v-if="gift" title="贺卡礼物关怀" type="gift" :care-gift="info.careTaskGiftList" :info="info"></CareTable>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import Title from '@/components/Title'
import BaseInfo from '../components/baseInfo'
import { List, ListItem } from '@/components/List'
import CareTable from '../../components/careTable'
import { careTaskDetail } from '@/api/guestCare'
export default {
  name: 'CustomerDetail',
  components: {
    ContentWrap,
    Title,
    BaseInfo,
    List,
    ListItem,
    CareTable
  },
  data() {
    return {
      info: {}
    }
  },
  computed: {
    careMode() {
      if (this.info.careMode) {
        return this.info.careMode.split(',')
      }
      return []
    },
    sms() {
      return this.careMode.includes('1') || this.careMode.includes(1)
    },
    email() {
      return this.careMode.includes('2') || this.careMode.includes(2)
    },
    call() {
      return this.careMode.includes('3') || this.careMode.includes(3)
    },
    gift() {
      return this.careMode.includes('4') || this.careMode.includes(4)
    }
  },
  created() {
    const id = this.$route.query.id
    if (id) {
      this.getDetail(id)
    }
  },
  methods: {
    getDetail(id) {
      careTaskDetail(id).then(res => {
        this.info = res.data
      })
    }
  }
}
</script>
<style lang='scss' module>
.wrap{
.title{
  color: rgba(0,0,0,0.85);
  font-size: 16px;
  font-weight: 700;
}
}
</style>
